<template>
  <div ref="chartRef" class="chart-container"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, defineProps } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  days: {
    type: Number,
    default: 7,
    validator: (value) => [3, 7, 15].includes(value)
  }
})

const chartRef = ref(null)
let chart = null

// 水位数据
const waterLevelData = {
  days: ['Day1', 'Day2', 'Day3', 'Day4', 'Day5', 'Day6', 'Day7', 'Day8', 'Day9', 'Day10', 'Day11', 'Day12', 'Day13', 'Day14', 'Day15'],
  levels: [6.8, 7.0, 7.3, 7.6, 8.0, 8.5, 10.2, 9.8, 9.1, 8.5, 8.0, 7.7, 7.4, 7.1, 6.9],
  trends: ['±0', '+0.2', '+0.3', '+0.3', '+0.4', '+0.5', '+1.7', '-0.4', '-0.7', '-0.8', '-0.3', '-0.3', '-0.3', '-0.3', '-0.2']
}

const getChartData = (days) => {
  return {
    days: waterLevelData.days.slice(0, days),
    levels: waterLevelData.levels.slice(0, days),
    trends: waterLevelData.trends.slice(0, days)
  }
}

const initChart = () => {
  if (!chartRef.value) return

  chart = echarts.init(chartRef.value)
  updateChart()
}

const updateChart = () => {
  const data = getChartData(props.days)
  
  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: function(params) {
        const waterLevel = params[0].data
        const trend = data.trends[params[0].dataIndex]
        return `${params[0].name}<br/>水位: ${waterLevel}m<br/>变化趋势: ${trend}`
      }
    },
    grid: {
      top: '10%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: data.days,
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        color: '#fff'
      }
    },
    yAxis: {
      type: 'value',
      name: '水位(m)',
      nameTextStyle: {
        color: '#fff'
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        color: '#fff'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.1)'
        }
      }
    },
    series: [
      {
        name: '水位',
        type: 'line',
        data: data.levels,
        smooth: true,
        lineStyle: {
          width: 2,
          color: '#00c2ff'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(0,194,255,0.4)'
            },
            {
              offset: 1,
              color: 'rgba(0,194,255,0.1)'
            }
          ])
        },
        itemStyle: {
          color: '#00c2ff'
        },
        markPoint: {
          data: [
            { type: 'max', name: '最大值' },
            { type: 'min', name: '最小值' }
          ],
          label: {
            color: '#fff'
          }
        },
        markLine: {
          data: [
            { type: 'average', name: '平均值' }
          ],
          label: {
            color: '#fff'
          }
        }
      }
    ]
  }

  chart.setOption(option)
}

// 监听天数变化
watch(() => props.days, () => {
  updateChart()
})

// 监听窗口大小变化
const handleResize = () => {
  chart?.resize()
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  chart?.dispose()
})
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style> 